<!-- 系统信息页面 -->
<template>
	<view :class="[msgIndex==2?'bg1':'bg2']" class="content">
		<z-paging ref="paging" v-model='msgData' @query="queryList" v-if="isshow">
			<template slot='top'>
				<view class="message_nav">
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/leftout.png" @click='back'></image>
					<view class="msg_flex">
						<view v-for="(item,index) in msgList" :key="index">
							<view :class="[index==msgIndex?'choosedIndex':'msg_item']" @click="msgItem(index)">
								<view class="">{{item.content}}</view>
								<view class="remind" v-if='item.num>0'>{{item.num}}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 系统信息 -->
			<view class="message_cycle" v-if='msgIndex==0'>
				<view v-for="(item,index) in msgData" :key="index" class="messageItem"
					@click="systemPage(item.id,item.readFlag)">
					<view class="systemIcon_box">
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/systemIcon.png"></image>
						<view class="title">{{item.title}}</view>
						<view v-if="item.readFlag == 0" class="news"></view>
					</view>
					<view class="message_contents">
						<view class="messages">{{item.content}}</view>
						<view class="timer">
							<text>发布时间：</text>
							<view class="">{{item.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="order_message" v-if="msgIndex==1">
				<view v-for="(item,index) in msgData" :key="index" class="messageItem"
					@click.stop="orderMess(item.id,item.readFlag)">
					<view class="systemIcon_box">
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/ordermsg.png"></image>
						<view class="title">{{item.title}}</view>
						<view class="news" v-if="item.readFlag==0"></view>
					</view>
					<view class="message_contents">
						<view class="messages">{{item.content}}</view>
						<view class="timer">
							<text>发布时间：</text>
							<view class="">{{item.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 动态 -->
			<view class="dynamic" v-if="msgIndex==2">
				<view class="dynamic_item" v-for="(item,index) in msgData" :key="index"
					@click='dynamicDetail(item.id,item.readFlag)'>
					<avatar class="avatar" :src="item.headPortrait"></avatar>
					<view class="rightbox">
						<view class="nickname">
							<view>{{item.nickName}}</view>
							<view class="news" v-if="item.readFlag==0"></view>
							<!-- <view v-if="item.readFlag == 0" class="numberbg">1</view> -->
						</view>
						<view class="time nickname">
							<view class="">{{item.msType || item.title}}</view>
							<view class="">{{item.createTime}}</view>
						</view>
						<view class="">{{item.replay}}</view>
						<view class="oldmsg">{{item.content}}</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		messageList,
		setMessageRead,
		unreadCate
	} from '@/apis/apis.js'
	import avatar from '@/components/avatar.vue'
	export default {
		components: {
			avatar
		},
		data() {
			return {
				msgList: [{
						num: 0,
						content: '系统信息'
					},
					{
						num: 0,
						content: '订单信息'
					},
					{
						num: 0,
						content: '动态'
					}
				],
				msgIndex: 0,
				isshow:false,
				msgData: [],
			}
		},
		onLoad(options) {
			this.msgIndex = options.chooseIndex ? options.chooseIndex : 0
		},
		onShow() {
			this.getMessageBoo()
			this.isshow = true
			// 第一次加载会报错
			if (this.msgData.length) {
				this.$refs.paging.reload()
			}
		},
		onHide() {
			this.isshow = false
		},
		methods: {
			async getMessageBoo() {
				const res = await unreadCate()
				console.log(res.data)
				this.msgList = [{
						num: res.data.systemUnreadNum || 0,
						content: '系统信息'
					},
					{
						num: res.data.orderUnreadNum || 0,
						content: '订单信息'
					},
					{
						num: res.data.dynamicUnreadNum || 0,
						content: '动态'
					}
				]
			},
			queryList(pageNo, pageSize) {
				messageList({
					pageNum: pageNo,
					pageSize: pageSize,
					revcNoticeType: this.msgIndex
				}).then(res => {
					console.log('info', res)
					res.data.forEach(el => {
						if (el.title.indexOf('：') != -1) {
							const i = el.title.indexOf('：')
							el.msType = el.title.substring(0, i)
							el.replay = el.title.substring(i + 1)
						}
					})
					this.$refs.paging.complete(res.data);
				})
			},
			//点击图标返回上一页
			back() {
				uni.navigateBack()
			},
			//点击信息导航
			msgItem(index) {
				this.getMessageBoo()
				this.msgIndex = index
				this.$refs.paging.reload()
			},
			goOrderDetail(v) {
				console.log('跳转订单消息', v)
			},
			//跳转系统信息详情页面
			systemPage(id, flag) {
				this.setDoneApi(id)
				uni.navigateTo({
					url: `../systemDetail/systemDetail?id=${id}&flag=${flag}`
				})
			},
			orderMess(id, flag) {
				console.log(id, flag, this.dto,'111')
				if (flag == 0) {
					this.setDoneApi(id)
				}
			},
			//跳转动态详情页面
			dynamicDetail(id, flag) {
				this.setDoneApi(id)
				uni.navigateTo({
					url: `../dynamicDetail/dynamicDetail?id=${id}&flag=${flag}`
				})
			},
			// 设置为已读
			setDoneApi(id) {
				setMessageRead({
					messageIds: id
				}).then(res => {
					// console.log(res)
					this.$refs.paging.reload()
				})
			},
			//接收系统消息页面传递的参数
			sendValue(isRead) {
				// this.setDoneApi(id)
				if (isRead) {
					this.$refs.paging.reload()
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.bg1 {
		background: #fff;
	}

	.bg2 {
		background-color: #F8F8F8;
	}

	.content {
		width: 100%;
		min-height: 100vh;

		.message_nav {
			display: flex;
			align-items: center;
			padding: 86rpx 0 0 4%;

			&>image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 36rpx;
			}

			.msg_flex {
				display: flex;
				align-items: center;

				.msg_item {
					margin-right: 54rpx;
					color: #818EA8;
					font-size: 30rpx;
					position: relative;
				}

				.choosedIndex {
					margin-right: 54rpx;
					color: #242A3A;
					font-size: 38rpx;
					font-weight: 700;
					position: relative;


				}

				.remind {
					position: absolute;
					top: 0;
					right: -30rpx;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #FFAB32;
					color: #ffffff;
					font-size: 15rpx;
					text-align: center;
				}

				.choosedIndex::after {
					width: 16rpx;
					height: 10rpx;
					background: #242A3A;
					border-radius: 4rpx;
					position: absolute;
					-webkit-transform: scaleY(.5);
					transform: scaleY(.5);
					content: '';
					top: 68rpx;
					left: 50%;
				}
			}
		}

		.message_cycle,
		.order_message {
			width: 92%;
			margin: 0 auto;
			margin-top: 68rpx;

			.messageItem {
				width: 100%;
				background-color: #fff;
				box-shadow: 0px 2px 12px 0px rgba(82, 82, 82, 0.08);
				border-radius: 10rpx;
				margin: 26rpx 0;


				.systemIcon_box {
					padding-left: 16rpx;
					display: flex;
					align-items: center;
					height: 86rpx;
					border-bottom: 1rpx solid #E9E9E9;
					position: relative;

					&>image {
						width: 64rpx;
						height: 64rpx;
						margin-right: 14rpx;
					}

					.news {
						width: 12rpx;
						height: 12rpx;
						border: 2rpx solid #fff;
						border-radius: 50%;
						background-color: #FFAB32;
						position: absolute;
						left: 60rpx;
						top: 20rpx;
					}

					.title {
						color: #1A1A1A;
						font-size: 30rpx;
						font-weight: 700;
						width: 442rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.message_contents {
					width: 100%;
					padding: 30rpx 42rpx 26rpx 26rpx;
					// background-color: #818EA8;

					.messages {
						width: 100%;
						color: #939393;
						font-size: 28rpx;
						margin-bottom: 22rpx;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						display: -moz-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						-moz-line-clamp: 2;
						-moz-box-orient: vertical;

					}

					.timer {
						color: #B7B7B7;
						font-size: 26rpx;
						display: flex;
						align-items: center;

						&>text {
							margin-right: 24rpx;
						}
					}
				}
			}
		}

		.dynamic {
			width: 92%;
			margin: 0 auto;
			margin-top: 68rpx;

			.dynamic_item {
				position: relative;
				width: 100%;
				padding: 36rpx 0 30rpx 0;
				display: flex;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

				.news {
					width: 12rpx;
					height: 12rpx;
					border: 2rpx solid #fff;
					border-radius: 50%;
					background-color: #FFAB32;
					position: absolute;
					right: 60rpx;
					top: 20rpx;
				}

				.avatar {
					width: 78rpx;
					height: 78rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 20rpx; //
				}

				.rightbox {
					color: #373737;
					font-size: 28rpx;

					.nickname {
						display: flex;
						justify-content: space-between;
						align-items: center;



					}

					.time {
						margin: 22rpx 0 26rpx 0;
						color: #828282;
						font-size: 26rpx;
					}

					.oldmsg {
						color: #828282;
						font-size: 26rpx;
						line-height: 40rpx;
						width: 292px;
						padding: 26rpx 20rpx 30rpx 22rpx;
						margin-top: 26rpx;
						background: #F8F8F8;
						border-radius: 5px;
						text-overflow: ellipsis;
						overflow: hidden; //溢出内容隐藏
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 2; //行数
						line-clamp: 2;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
					}
				}
			}
		}
	}
</style>
